<template>
  <div id="zlh-main-box">
    <div class="zlh-default-background-color" style="padding: 1.5rem;">
      <el-space direction="vertical" alignment="left" size="large">
        <div>
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }"> <el-icon><House /></el-icon></el-breadcrumb-item>
            <el-breadcrumb-item>文章标签管理</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div>
          <div style="padding: 1rem"><h2>文章标签管理</h2></div>
        </div>
      </el-space>
    </div>
    <div class="zlh-flex-column-default">
      <div class="zlh-search zlh-default-background-color">
        <el-form :inline="true" :model="searchData" class="demo-form-inline">
          <el-form-item label="标签名称">
            <el-input v-model="searchData.article_tips_name" placeholder="标签名称" clearable/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="zlh-table-box">
        <div class="zlh-table-box-header">
          <span class="zlh-table-box-title">标签列表</span>
          <div class="zlh-table-box-operation">
            <el-button type="primary" style="margin-left: 16px" @click="drawer = true">新增标签</el-button>
          </div>
        </div>
        <div class="zlh-table">
          <el-table :data="articleTipsList.articleTipsTableData" style="width: 100%">
            <el-table-column fixed prop="article_tips_id" label="ID" width="150" />
            <el-table-column prop="article_tips_name" label="标签名称" width="120" />
            <el-table-column prop="create_time" label="创建时间" width="120" />
            <el-table-column fixed="right" label="操作" width="120">
              <template #default = "scope">
                <el-button link type="primary" size="small" @click="deleteClick(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="zlh-page">
          <el-pagination   background layout="prev, pager, next"
                           @next-click = "nextClick"
                           @prev-click = "prevClick"
                           @current-change="currentChange" :total=total.total />
        </div>
      </div>
    </div>
  </div>
  <el-drawer
      :before-close="handleClose"
      v-model="drawer"
      title="I am the title"
      :with-header="false">
    <el-divider content-position="left">新增标签</el-divider>
    <el-form :model="addForm" label-width="120px">
      <el-form-item label="标签名称">
        <el-input v-model="addForm.article_tips_name" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onAddSubmitForm">新增</el-button>
      </el-form-item>
    </el-form>

  </el-drawer>
</template>


<script lang="ts" setup>
import {
    House,
} from '@element-plus/icons-vue'
import {reactive, ref} from 'vue'

// api
import articleTips from '@/api/articleTips.js'
import {ElMessage} from "element-plus";

const drawer = ref(false)

let articleTipsList = reactive({
  articleTipsTableData:[]
})

let searchData =reactive({
  article_tips_name:""
})


let page = 1;
let total = reactive({
  total:0
})

function onSearch(){
  getArticleTipsList(page,{
    article_tips_name:searchData.article_tips_name
  });
}

getData();
function getData(){
  getArticleTipsList(page);
}

function getArticleTipsList(page: number,filters = {}){
  let args = {
    current_page:page,
    filters:filters
  }
  articleTips.getArticleTipsList(args)
      .then((res: any) => {
        let resData =  res.data.data;
        total.total = res.data.total
        articleTipsList.articleTipsTableData = resData
      })
      .catch((error: any)=>{
        ElMessage.error("网络异常")
        console.log(error)
      })
}


const activeNames = ref([])
const handleChange = (val: string[]) => {
  console.log(val)
}

const deleteClick = (row: any) => {
  deleteArticleTips(row.article_type_id)
}

function deleteArticleTips(article_type_id:number){
  articleTips.deleteArticleTips({article_type_id:article_type_id})
      .then((res: any) => {
        if(res.ok){
          ElMessage.success("删除成功！")
          getArticleTipsList(page)
        }
      })
      .catch((error: any)=>{
        ElMessage.error("网络异常")
        console.log(error)
      })
}

// do not use same name with ref
const addForm = reactive({
  article_tips_name:""
})

const onAddSubmitForm = () => {
  addArticle(addForm)
}

const handleClose = (done:()=>void)=>{
  getArticleTipsList(page)
  addForm.article_tips_name = ""
  done()
}

function addArticle(data: any){
  articleTips.addArticleTips(data)
      // eslint-disable-next-line @typescript-eslint/no-empty-function
      .then((res: any) => {
        if(res.ok){
          ElMessage.success("新增成功！")
        }
      })
      .catch((error: any)=>{
        ElMessage.error("网络异常")
        console.log(error)
      })
}

function nextClick(cur_page:number){
  if(cur_page < total.total){
    page++;
    getArticleTipsList(page)
  }
}

function prevClick(cur_page:number){
  if(cur_page > 1){
    page--;
    getArticleTipsList(page)
  }
}

function currentChange(cur_page:number){
  page = cur_page
  getArticleTipsList(page)
}

</script>
<script lang="ts">
export default {
  name: "ArticleTipsSettingView"
}
</script>

<style scoped>

</style>
